//webpack.common.js

const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //mode: 'none', // webpack4之后必须设置 否则会警告
    entry: './src/main.js',
    // output: {
    //     path: path.join(__dirname, 'dist'),
    //     //hash值：有三种类型hash、chunkhash、contenthash，这里我们使用的contenthash
    //     filename: 'js/bundle.[contenthash:6].js'// 设置hash值 并将文件放置在dist/js下
    // },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.js'// 设置hash值 并将文件放置在dist/js下
    },
    module: {
        rules: [
            {
                test: /\.less$/, // \可有可无 .表示任意字符  \.更严谨 防止出现xxless文件
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            // {
            //     test: /\.(vue|js|jsx)$/,
            //     loader: 'eslint-loader',
            //     exclude: /node_modules/,
            //     enforce: 'pre' // 预处理
            // },
            {
                test: /\.css$/,
                use: [ // use多个从后往前执行   先用到的放后面
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader', // 适合小文件 将文件转化为 base64 
                    // 符合规则就转 不能转就使用 fallback => file-loader
                    options: {
                        name: "img/[name].[ext]",
                        limit: 8 * 102, // KB 设置限制  超过则使用file-loader
                        esModule: false
                    }
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(), // 作用：将rules中的规则应用到vue单文件组件中 例：style script中的语法解析
        // new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'My Webpack Vue',
            // favicon: path.resolve(__dirname, 'public/favicon.ico'),
            template: path.resolve(__dirname, 'public/index.html')
        }),
        new webpack.DefinePlugin({// 默认值配置
            BASE_URL: '"/"'
        }),
        // new CopyWebpackPlugin({
        //     patterns: [
        //         {
        //             from: path.resolve(__dirname, 'public/favicon.ico'),
        //         }
        //     ],
        // }),

    ],
    // devServer: {
    //     contentBase: path.join(__dirname, 'dist'), // 资源路径
    //     hot: true, // 是否热加载
    //     open: true, // 是否自动打开浏览器
    //     port: 5522 // 接口
    // }
}